<template>
    <div>
        <div class="foot">
            <div class="post-copyright">
                <li><span>作者:</span> <span>{{ article_author }}</span></li>
                <li><span>文章链接:https://localhost:8088/article&id=1</span></li>
                <li><span>声明:</span> <span>请标注出处</span></li>
            </div>
            <div class="like-buttom">
                <div class="like" @click="setlike" :class="[islike ? 'active' : '']">
                    <i class="iconfont icon-icon"></i>
                    <span style="margin-left: 5px;" v-if="islike">{{ parseInt(articlee_strs) + 1 }}</span>
                    <span style="margin-left: 5px;" v-else>{{ articlee_strs }}</span>
                </div>

            </div>
            <div class="recommend">
                <div class="left recom">
                    <div class="info" @click="toarticle(1)">
                        <img :src="nextandprearticlelist[0].article_cover">
                        <h1> 上一篇 </h1>
                        <div>{{ nextandprearticlelist[0].article_title }}</div>
                    </div>
                </div>
                <div class="right recom">
                    <div class="info" @click="toarticle(2)">
                        <img :src="nextandprearticlelist[1].article_cover">
                        <h1> 下一篇 </h1>
                        <div>{{ nextandprearticlelist[1].article_title }}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { onMounted, ref, watch } from 'vue';
import { useRouter } from 'vue-router';
import { addlike } from '@/api/article.js';
import { debounce } from '@/utils/index.js';
let debouncefunc = debounce()
let router = useRouter();
let islike = ref(false);
let props = defineProps({
    article_author: {
        type: String,
        default: '小康同学'
    },
    article_id: {
        type: Number,
    },
    nextandprearticlelist: {
        type: Array,
        default: []
    },
    articlee_strs: {
        type: String
    }
})

function toarticle(fleg) {
    if (fleg == 1) {
        // 上一篇
        router.push({
            path: '/article',
            query: {
                id: props.nextandprearticlelist[0].id
            }
        })
    } else {
        // 下一篇
        router.push({
            path: '/article',
            query: {
                id: props.nextandprearticlelist[1].id
            }
        })
    }
}
async function setlike() {
    debouncefunc(1000, async () => {
        if (islike.value == false) {
            let res = await addlike({ article_id: props.article_id, status: 1 })
            if (res.data.status == 200) {
                islike.value = true;
            }
        } else {
            let res = await addlike({ article_id: props.article_id, status: 2 })
            if (res.data.status == 200) {
                islike.value = false;
            }
        }
    })
}

</script>

<style lang="scss" scoped>
.active {
    color: rgb(210, 188, 27) !important;
}

.info:hover img {
    /* 放大1.3倍 */
    transform: scale(1.1);
    transition: all .5s;
}

.info {
    height: 100%;
    width: 100%;
    padding: 10px 20px;
    box-sizing: border-box;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(0, -50%);
    cursor: pointer;
    color: #000000;

    @include userTheme {
        font-family: getThemeValue("fontfamily");
    }

    overflow: hidden;
}

.right .info {
    text-align: right;
}

.info img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: -1;
    object-fit: cover;
}

.info h1 {
    font-size: 20px;
    font-weight: 600;

    @include userTheme {
        font-family: getThemeValue("fontfamily");
    }

}

.recom {
    height: 100%;
    width: 50%;
    box-sizing: border-box;
    position: relative;
}

.recommend {
    margin-top: 10px;
    height: 35%;
    width: 100%;
    box-sizing: border-box;
    display: flex;
}

.imgg {
    height: 10vmax;
    width: 10vmax;
    margin-right: 20px;
}

.icon {
    height: 16px;
    width: 16px;
    margin-right: 2px;
}

.like-buttom {
    height: 10%;
    box-sizing: border-box;
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 10px;
}

.like-buttom .like {
    padding: 5px;
    box-sizing: border-box;
    width: 10%;
    border: 1px solid #fff;
    text-align: center;
    font-size: 16px;
    line-height: 16px;
    border-radius: 10px;
    cursor: pointer;
}

.like-buttom {
    .like {
        &:hover {
            @include userTheme {
                border: getThemeValue("hoverBorder");
            }

        }
    }
}

.post-copyright {
    border-radius: 5px;
    width: 100%;

    @include userTheme {
        background-color: getThemeValue("articleFootColortop");
    }

    padding: 10px;
    box-sizing: border-box;
}

.post-copyright li {
    margin: 5px 0;
}

.post-copyright li span {
    word-wrap: break-word;
    word-break: break-all;
    margin-right: 10px;
    color: #676767;
}

.foot {
    @include userTheme {
        font-family: getThemeValue("fontfamily");
        background-color: getThemeValue("articleFootColor");
    }
    
    height: 250px;
    width: 100%;
    
    padding: 10px;
    box-sizing: border-box;
}

@media only screen and (max-width: 650px) {

    .foot {
        height: 40vh;
    }

    .like-buttom .like {
        padding: 5px;
        box-sizing: border-box;
        width: 20%;
        border: 1px solid #fff;
        text-align: center;
        font-size: 16px;
        border-radius: 10px;
    }
}
</style>